
import html2canvas from '@/utils/html2canvas'
import { mapActions, mapState } from 'vuex'
export default {
  methods: {
    ...mapActions('programs', ['requestScenesChange','requestScenesSave']),
    onRequestScenesChange (params) {
      this.requestScenesChange({ ...params })
    },
    onRequestScenesSave (params) {
      this.createScreenShot().then(res => {
        this.requestScenesSave({ ...params, ...res })
      })
    },
    createScreenShot () {
      return new Promise((resolve, reject) => {
        let shareContent = document.getElementById('canvas-panel')// 需要截图的包裹的（原生的）DOM 对象
        let width = shareContent.clientWidth// shareContent.offsetWidth; //获取dom 宽度
        let height = shareContent.clientHeight// shareContent.offsetHeight; //获取dom 高度
        let canvas = document.createElement('canvas') // 创建一个canvas节点
        let scale = 2 // 定义任意放大倍数 支持小数
        canvas.width = width * scale // 定义canvas 宽度 * 缩放
        canvas.height = height * scale // 定义canvas高度 *缩放
        canvas.style.width = shareContent.clientWidth * scale + 'px'
        canvas.style.height = shareContent.clientHeight * scale + 'px'
        canvas.getContext('2d').scale(scale, scale) // 获取context,设置scale
        let opts = {
          scale: scale,   // 添加的scale 参数
          canvas: canvas, // 自定义 canvas
          logging: false, // 日志开关，便于查看html2canvas的内部执行流程
          width: width,   // dom 原始宽度
          height: height,
          useCORS: true  // 【重要】开启跨域配置
        }
        html2canvas(shareContent, opts).then(canvas => {
          const url = canvas.toDataURL()
          resolve({ file: url })
        })
      })
    }
  }
}
